<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理页面</title>
    <link rel="stylesheet" href="../style/bootstrap.css">
    <script src="../js/axios.js"></script>
    <script src="../js/vue2.js"></script>
    <style>
       .user-table {
            margin-top: 20px;
        }
      .user-form {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1 class="mt-4">用户管理</h1>
            <!-- <div class="user-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input v-model="newUser.name" type="text" class="form-control" id="name" placeholder="姓名">
                </div>
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input v-model="newUser.username" type="text" class="form-control" id="username" placeholder="用户名">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input v-model="newUser.password" type="password" class="form-control" id="password" placeholder="密码">
                </div>
                <div class="form-group">
                    <label for="authority">权限</label>
                    <select v-model="newUser.authority" class="form-control" id="authority">
                        <option value="1">普通用户</option>
                        <option value="2">管理员</option>
                    </select>
                </div>
                <button @click="addUser" class="btn btn-primary">添加用户</button>
            </div> -->
            <table class="table user-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>姓名</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        <th>权限</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>zhangsan</td>
                        <td>13800138000</td>
                        <td>2020-08-15</td>
                        <td>2025-12-15</td>
                        <td>普通用户</td>
                        <td>
                            <button class="btn btn-sm btn-warning">编辑</button>
                            <button class="btn btn-sm btn-danger">删除</button>
                        </td>
                    </tr>
                    <tr v-for="(user, index) in users" :key="user.id">
                        <td>{{ user.id }}</td>
                        <td>{{ user.name }}</td>
                        <td>{{ user.username }}</td>
                        <td>{{ user.authority === 1? '普通用户' : '管理员' }}</td>
                        <td>
                            <button @click="editUser(index)" class="btn btn-sm btn-warning">编辑</button>
                            <button @click="deleteUser(index)" class="btn btn-sm btn-danger">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                users: [],
                newUser: {
                    name: '',
                    username: '',
                    password: '',
                    authority: 1
                },
                editIndex: -1
            },
            async created() {
                await this.fetchUsers();
            },
            methods: {
                async fetchUsers() {
                    try {
                        // 模拟从后端获取用户数据
                        const response = await axios.get('http://localhost:3888/users');
                        this.users = response.data;
                    } catch (error) {
                        console.error('获取用户数据失败', error);
                    }
                },
                async addUser() {
                    try {
                        // 模拟向后端添加用户
                        const response = await axios.post('http://localhost:3888/users', this.newUser);
                        this.users.push(response.data);
                        this.resetForm();
                    } catch (error) {
                        console.error('添加用户失败', error);
                    }
                },
                async editUser(index) {
                    this.editIndex = index;
                    const user = this.users[index];
                    this.newUser = {
                        name: user.name,
                        username: user.username,
                        password: user.password,
                        authority: user.authority
                    };
                },
                async updateUser() {
                    try {
                        const user = this.newUser;
                        // 模拟向后端更新用户数据
                        const response = await axios.put(`http://localhost:3888/users/${user.id}`, user);
                        this.users[this.editIndex] = response.data;
                        this.resetForm();
                    } catch (error) {
                        console.error('更新用户失败', error);
                    }
                },
                async deleteUser(index) {
                    try {
                        const user = this.users[index];
                        // 模拟从后端删除用户
                        await axios.delete(`http://localhost:3888/users/${user.id}`);
                        this.users.splice(index, 1);
                    } catch (error) {
                        console.error('删除用户失败', error);
                    }
                },
                resetForm() {
                    this.newUser = {
                        name: '',
                        username: '',
                        password: '',
                        authority: 1
                    };
                    this.editIndex = -1;
                }
            }
        });
    </script>
</body>
</html>